import { applyTheme, defaultTheme, getThemeConfig, themes, type ThemeConfig } from '@/config/theme'
import { defineStore } from 'pinia'
import { computed, ref } from 'vue'

/**
 * 主题状态管理
 */
export const useThemeStore = defineStore('theme', () => {
  // 当前主题名称
  const currentTheme = ref<string>(defaultTheme)

  // 当前主题配置
  const themeConfig = computed(() => getThemeConfig(currentTheme.value))

  // 可用主题列表
  const availableThemes = computed(() => Object.values(themes))

  // 切换主题
  const switchTheme = (themeName: string) => {
    if (themes[themeName]) {
      currentTheme.value = themeName
      applyTheme(themeName)
    }
  }

  // 初始化主题
  const initTheme = () => {
    const savedTheme = localStorage.getItem('theme') || defaultTheme
    switchTheme(savedTheme)
  }

  // 获取主题配置
  const getTheme = (themeName?: string): ThemeConfig => {
    return getThemeConfig(themeName || currentTheme.value)
  }

  // 是否为深色主题
  const isDarkTheme = computed(() => currentTheme.value === 'dark')

  // 是否为浅色主题
  const isLightTheme = computed(() => currentTheme.value === 'light')

  return {
    currentTheme,
    themeConfig,
    availableThemes,
    switchTheme,
    initTheme,
    getTheme,
    isDarkTheme,
    isLightTheme,
  }
}) 